<template>
  <div
    class="image-viewer"
    @wheel="handleWheel"
    ref="viewer"
  >
    <!-- 尺寸指示器 -->
    <div class="size-indicator" v-show="showIndicator">
      当前尺寸: {{ zoomLevel }}%
    </div>

    <!-- 可拖动图片 -->
    <img
      :src="shouye"
      alt="飞羽行迹"
      class="scalable-image"
      :style="imageStyle"
      @mousedown="startDrag"
    />
  </div>
</template>

<script setup>
import { ref, computed, onUnmounted } from 'vue'
import shouye from '@/assets/images/shouye.png'

// 控制参数
const zoomLevel = ref(100)
const offsetX = ref(0)
const offsetY = ref(0)
const showIndicator = ref(false)
const isDragging = ref(false)
const viewer = ref(null)

let startX = 0
let startY = 0
let startOffsetX = 0
let startOffsetY = 0
let indicatorTimer = null

// 图片样式计算
const imageStyle = computed(() => ({
  width: `${zoomLevel.value}%`,
  height: 'auto',
  transform: `translate(${offsetX.value}px, ${offsetY.value}px)`,
  cursor: isDragging.value ? 'grabbing' : 'grab'
}))

// 滚轮缩放控制
const handleWheel = (e) => {
  e.preventDefault()

  // 计算缩放中心点
  const rect = viewer.value.getBoundingClientRect()
  const mouseX = e.clientX - rect.left
  const mouseY = e.clientY - rect.top

  // 调整缩放级别
  const oldZoom = zoomLevel.value
  zoomLevel.value = Math.max(10, Math.min(zoomLevel.value - e.deltaY * 0.5, 500))

  // 基于鼠标位置智能调整偏移量
  const ratio = zoomLevel.value / oldZoom
  offsetX.value = mouseX - (mouseX - offsetX.value) * ratio
  offsetY.value = mouseY - (mouseY - offsetY.value) * ratio

  // 显示临时指示器
  showIndicator.value = true
  clearTimeout(indicatorTimer)
  indicatorTimer = setTimeout(() => {
    showIndicator.value = false
  }, 1000)
}

// 开始拖拽（修复实时拖动问题）
const startDrag = (e) => {
  if (e.button !== 0) return // 只响应左键

  isDragging.value = true
  startX = e.clientX
  startY = e.clientY
  startOffsetX = offsetX.value
  startOffsetY = offsetY.value

  // 添加事件监听（使用 passive: false 确保实时性）
  window.addEventListener('mousemove', dragImage, { passive: false })
  window.addEventListener('mouseup', stopDrag, { passive: true })

  // 阻止默认行为防止选中文本
  e.preventDefault()
}

// 实时拖拽（修复版）
const dragImage = (e) => {
  if (!isDragging.value) return

  // 实时计算偏移量
  offsetX.value = startOffsetX + (e.clientX - startX)
  offsetY.value = startOffsetY + (e.clientY - startY)

  // 阻止默认行为确保流畅
  e.preventDefault()
}

// 停止拖拽
const stopDrag = () => {
  if (isDragging.value) {
    isDragging.value = false
    window.removeEventListener('mousemove', dragImage)
    window.removeEventListener('mouseup', stopDrag)
  }
}

// 清理
onUnmounted(() => {
  stopDrag()
  clearTimeout(indicatorTimer)
})
</script>

<style scoped>
.image-viewer {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: inherit;
  user-select: none;
  touch-action: none; /* 阻止触摸默认行为 */
}

.scalable-image {
  position: absolute;
  user-select: none;
  touch-action: none; /* 阻止图片上的触摸默认行为 */
  will-change: transform; /* 优化动画性能 */
}

.size-indicator {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  z-index: 10;
  pointer-events: none;
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
</style>